<template>
  <!--  中间屏-头部-监管事件 -->
  <div class="container flex">
    <div class="list list-l flex">
      <h4>{{ data.title }}</h4>
      <div
        class="list-count"
        v-for="(i, index) in data.disposalData"
        :key="i.name + index"
        @click="handleClick('disposalStatus', i.code)"
      >
        <div class="list-count-num" :title="i.count">{{ i.count>9999?'9999+':i.count }}</div>
        <div class="list-count-tit">{{ i.name }}</div>
      </div>
    </div>
    <div class="list list-m flex">
      <div
        class="list-box flex"
        v-for="(i, index) in data.event_category"
        :key="i.normalName + index"
        @click="handleClick('categoryCode', i.normalCode)"
      >
        <span class="list-box-title">{{ i.normalName }}</span>
        <span class="list-box-count"
          :title="i.disposedCount">{{ i.disposedCount>999?'999+':i.disposedCount }}/
          <!-- <el-tooltip
            v-if="i.count > 1000"
            class="item"
            effect="light"
            :content="i.count + ''"
            placement="top-start"
          >
            <span>999+</span>
          </el-tooltip> -->
          <span :title="i.count"> {{ i.count>999?'999+':i.count }}</span>
        </span>
      </div>
    </div>
    <div class="list list-r flex">
      <div
        class="list-box flex"
        v-for="(i, index) in data.event_level"
        :key="i.normalName + index"
        @click="handleClick('levelCode', i.normalCode)"
      >
        <i :class="['icon-' + index]"></i>
        <span class="list-box-title">{{ i.normalName }}</span>
        <span :class="['list-box-count', 'list-box-count-' + index]"
          >{{ i.disposedCount }}/
          <el-tooltip
            v-if="i.count > 1000"
            class="item"
            effect="light"
            :content="i.count + ''"
            placement="top-start"
          >
            <span>999+</span>
          </el-tooltip>
          <span v-else> {{ i.count }}</span>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      defalut() {
        return {};
      },
    },
  },
  methods: {
    handleClick(params, code) {
      this.$emit("handleImgItems", { [params]: code });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  justify-content: space-around;

  .list {
    height: 70%;

    &.list-l {
      flex-wrap: wrap;
      width: 20%;
      justify-content: space-between;
      background: url("~@/assets/images/comprehensive/bianzu1.png") no-repeat;
      background-size: 100% 100%;

      h4 {
        width: 100%;
        line-height: 2rem;
        font-size: 1.2rem;
        text-align: center;
        background-image: linear-gradient(
          -89deg,
          rgba(4, 82, 115, 0.1) 3%,
          rgba(33, 255, 235, 0.5) 49%,
          rgba(4, 82, 115, 0.1) 100%
        );
      }

      .list-count {
        cursor: pointer;
        width: 50%;
        text-align: center;
        // padding: 1rem 0;

        .list-count-num {
          font-size: 1.6rem;
          line-height: 2rem;
          margin-bottom: 0.5rem;
          font-weight: bold;
          color: #21ffeb;
        }

        .list-count-tit {
          font-size: 1rem;
        }
      }
    }

    &.list-m {
      width: 36%;
      padding: 0.5rem;
      background: url("~@/assets/images/comprehensive/bianzu02.png") no-repeat;
      background-size: 100% 100%;
      flex-wrap: wrap;
      justify-content: space-around;

      .list-box {
        width: 45%;
        text-align: left;
        cursor: pointer;
        .list-box-title {
          flex: 1;
        }

        .list-box-count {
          font-size: 1.4rem;
          color: #21ffeb;
        }
      }
    }

    &.list-r {
      width: 36%;
      background: url("~@/assets/images/comprehensive/bianzu02.png") no-repeat;
      background-size: 100% 100%;
      flex-wrap: wrap;
      justify-content: space-around;
      padding: 0.5rem;

      .list-box {
        width: 45%;
        text-align: left;
        cursor: pointer;
        i {
          display: inline-block;
          width: 0.5rem;
          height: 0.5rem;
          border-radius: 100%;
          margin-right: 0.5rem;
        }

        .list-box-title {
          flex: 1;
        }

        .list-box-count {
          font-size: 1.4rem;
        }
      }
    }
  }
}

.icon-0 {
  background: #f01515;
  border: 0.2rem solid rgba(240, 21, 21, 0.6);
}

.icon-1 {
  background: #21ffeb;
  border: 0.2rem solid rgba(33, 255, 235, 0.6);
}

.icon-2 {
  background: #ffcf2f;
  border: 0.2rem solid rgba(255, 207, 47, 0.6);
}

.icon-3 {
  background: #3b8bff;
  border: 0.2rem solid rgba(59, 139, 255, 0.6);
}

.list-box-count-0 {
  color: #f01515;
}

.list-box-count-1 {
  color: #21ffeb;
}

.list-box-count-2 {
  color: #ffcf2f;
}

.list-box-count-3 {
  color: #3b8bff;
}
</style>
